<template>
  <div>
    <h3>远程搜索</h3>
    <el-select
      v-model="value"
      multiple
      filterable
      remote
      reserve-keyword
      placeholder="请输入关键词"
      :remote-method="remoteMethod"
      :loading="loading">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>


    <el-collapse style="margin-top: 5px;">
      <el-collapse-item title="代码">
<pre><code class="html hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">el-select</span>
    <span class="hljs-attr">v-model</span>=<span class="hljs-string">"value"</span>
    <span class="hljs-attr">multiple</span>
    <span class="hljs-attr">filterable</span>
    <span class="hljs-attr">remote</span>
    <span class="hljs-attr">reserve-keyword</span>
    <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"请输入关键词"</span>
    <span class="hljs-attr">:remote-method</span>=<span class="hljs-string">"remoteMethod"</span>
    <span class="hljs-attr">:loading</span>=<span class="hljs-string">"loading"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">el-option</span>
      <span class="hljs-attr">v-for</span>=<span class="hljs-string">"item in options"</span>
      <span class="hljs-attr">:key</span>=<span class="hljs-string">"item.value"</span>
      <span class="hljs-attr">:label</span>=<span class="hljs-string">"item.label"</span>
      <span class="hljs-attr">:value</span>=<span class="hljs-string">"item.value"</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">el-option</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">el-select</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">options</span>: [],
        <span class="hljs-attr">value</span>: [],
        <span class="hljs-attr">list</span>: [],
        <span class="hljs-attr">loading</span>: <span class="hljs-literal">false</span>,
        <span class="hljs-attr">states</span>: [<span class="hljs-string">"Alabama"</span>, <span class="hljs-string">"Alaska"</span>, <span class="hljs-string">"Arizona"</span>,
        <span class="hljs-string">"Arkansas"</span>, <span class="hljs-string">"California"</span>, <span class="hljs-string">"Colorado"</span>,
        <span class="hljs-string">"Connecticut"</span>, <span class="hljs-string">"Delaware"</span>, <span class="hljs-string">"Florida"</span>,
        <span class="hljs-string">"Georgia"</span>, <span class="hljs-string">"Hawaii"</span>, <span class="hljs-string">"Idaho"</span>, <span class="hljs-string">"Illinois"</span>,
        <span class="hljs-string">"Indiana"</span>, <span class="hljs-string">"Iowa"</span>, <span class="hljs-string">"Kansas"</span>, <span class="hljs-string">"Kentucky"</span>,
        <span class="hljs-string">"Louisiana"</span>, <span class="hljs-string">"Maine"</span>, <span class="hljs-string">"Maryland"</span>,
        <span class="hljs-string">"Massachusetts"</span>, <span class="hljs-string">"Michigan"</span>, <span class="hljs-string">"Minnesota"</span>,
        <span class="hljs-string">"Mississippi"</span>, <span class="hljs-string">"Missouri"</span>, <span class="hljs-string">"Montana"</span>,
        <span class="hljs-string">"Nebraska"</span>, <span class="hljs-string">"Nevada"</span>, <span class="hljs-string">"New Hampshire"</span>,
        <span class="hljs-string">"New Jersey"</span>, <span class="hljs-string">"New Mexico"</span>, <span class="hljs-string">"New York"</span>,
        <span class="hljs-string">"North Carolina"</span>, <span class="hljs-string">"North Dakota"</span>, <span class="hljs-string">"Ohio"</span>,
        <span class="hljs-string">"Oklahoma"</span>, <span class="hljs-string">"Oregon"</span>, <span class="hljs-string">"Pennsylvania"</span>,
        <span class="hljs-string">"Rhode Island"</span>, <span class="hljs-string">"South Carolina"</span>,
        <span class="hljs-string">"South Dakota"</span>, <span class="hljs-string">"Tennessee"</span>, <span class="hljs-string">"Texas"</span>,
        <span class="hljs-string">"Utah"</span>, <span class="hljs-string">"Vermont"</span>, <span class="hljs-string">"Virginia"</span>,
        <span class="hljs-string">"Washington"</span>, <span class="hljs-string">"West Virginia"</span>, <span class="hljs-string">"Wisconsin"</span>,
        <span class="hljs-string">"Wyoming"</span>]
      }
    },
    mounted() {
      <span class="hljs-keyword">this</span>.list = <span class="hljs-keyword">this</span>.states.map(<span class="hljs-function"><span class="hljs-params">item</span> =&gt;</span> {
        <span class="hljs-keyword">return</span> { <span class="hljs-attr">value</span>: item, <span class="hljs-attr">label</span>: item };
      });
    },
    <span class="hljs-attr">methods</span>: {
      remoteMethod(query) {
        <span class="hljs-keyword">if</span> (query !== <span class="hljs-string">''</span>) {
          <span class="hljs-keyword">this</span>.loading = <span class="hljs-literal">true</span>;
          setTimeout(<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
            <span class="hljs-keyword">this</span>.loading = <span class="hljs-literal">false</span>;
            <span class="hljs-keyword">this</span>.options = <span class="hljs-keyword">this</span>.list.filter(<span class="hljs-function"><span class="hljs-params">item</span> =&gt;</span> {
              <span class="hljs-keyword">return</span> item.label.toLowerCase()
                .indexOf(query.toLowerCase()) &gt; <span class="hljs-number">-1</span>;
            });
          }, <span class="hljs-number">200</span>);
        } <span class="hljs-keyword">else</span> {
          <span class="hljs-keyword">this</span>.options = [];
        }
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
</code></pre>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<script>
    export default {
        data() {
            return {
                options: [],
                value: [],
                list: [],
                loading: false,
                states: ["Alabama", "Alaska", "Arizona",
                    "Arkansas", "California", "Colorado",
                    "Connecticut", "Delaware", "Florida",
                    "Georgia", "Hawaii", "Idaho", "Illinois",
                    "Indiana", "Iowa", "Kansas", "Kentucky",
                    "Louisiana", "Maine", "Maryland",
                    "Massachusetts", "Michigan", "Minnesota",
                    "Mississippi", "Missouri", "Montana",
                    "Nebraska", "Nevada", "New Hampshire",
                    "New Jersey", "New Mexico", "New York",
                    "North Carolina", "North Dakota", "Ohio",
                    "Oklahoma", "Oregon", "Pennsylvania",
                    "Rhode Island", "South Carolina",
                    "South Dakota", "Tennessee", "Texas",
                    "Utah", "Vermont", "Virginia",
                    "Washington", "West Virginia", "Wisconsin",
                    "Wyoming"]
            }
        },
        mounted() {
            this.list = this.states.map(item => {
                return { value: item, label: item };
            });
        },
        methods: {
            remoteMethod(query) {
                if (query !== '') {
                    this.loading = true;
                    setTimeout(() => {
                        this.loading = false;
                        this.options = this.list.filter(item => {
                            return item.label.toLowerCase()
                                .indexOf(query.toLowerCase()) > -1;
                        });
                    }, 200);
                } else {
                    this.options = [];
                }
            }
        }
    }
</script>
